<script lang="ts" setup>
import { getUsers } from "@/api";
interface User {
  uid: number;
  username: string;
  password: string;
  email: string;
  gender: string;
  registrationTime: string;
  lastLoginTime: string;
  roleId: number;
  status: number;
  avatar: string;
  deleted: number;
}
const multipleTableRef = ref<HTMLElement>();
const tableData = ref<User[]>([]);
onMounted(async () => {
  const { data } = await getUsers();
  console.log(data);
  data.forEach((t: User) => {
    tableData.value.push({ ...t });
  });
});
const handleEdit = (i: number, row: any) => {
  console.log(i, row);
};
const handleDelete = (i: number, row: any) => {
  console.log(i, row);
};
</script>
<template>
  <div>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="uid" width="120">
        <template #default="{ row }">
          {{ row.uid }}
        </template>
      </el-table-column>
      <el-table-column property="username" label="username" width="120" />
      <el-table-column label="password" property="password" />
      <el-table-column property="email" label="email" width="120" />
      <el-table-column label="gender" property="gender" />
      <el-table-column
        label="registrationTime"
        property="registrationTime"
        show-overflow-tooltip
      />
      <el-table-column
        label="lastLoginTime"
        property="lastLoginTime"
        show-overflow-tooltip
      />
      <el-table-column label="roleId" property="roleId" />
      <el-table-column label="status" property="status" />
      <el-table-column label="avatar" property="avatar" show-overflow-tooltip />
      <el-table-column label="deleted" property="deleted" />
    </el-table>
  </div>
</template>
<style lang="scss" scoped></style>
